<template>
  <div>
      <div class="top">
        <span @click="fun()" style="font-size:.14rem">💜返回</span>
        <p>热门</p>
        <h1>···</h1>
      </div>
      <div>
 
    <input type="text" />
    <input type="text" v-xiaoming/>
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" v-xiaohong/>
    <input type="text" />
    <input type="text" />
  </div>
   <div>
       <router-link :to="{name:'Shop',query:{xiaoming:'我是数据'}}">点我声明式传参query1</router-link>
       <br>
        <router-link :to="{path:'/shop',query:{xiaoming:'我是数据'}}">点我声明式传参query2</router-link>
     </div>

       
      <Fu/>
      <S/>
      <Foot />
  </div>
</template>

<script>
import Foot from "@/components/foot.vue";
import Fu from '@/components/fu.vue';
import S from "@/components/a.vue";

export default {
 components:{
     Foot,Fu,S
 },
 methods: {
 
  fun(){
    this.$router.push("./index")
  },
 },
 directives: {
    xiaoming: {
      inserted(el) {
        el.focus();
      },
    },
    xiaohong: {
      inserted(el) {
        el.style.backgroundColor = "red";
      },
    },
  },


}
</script>

<style scoped>
.top{
  display: flex;
  height: .4rem;
  width: 100%;
  background-color: white;
  line-height: .4rem;
  position: relative;
  border-bottom: .005rem solid gray;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.top>span{
color: gray;
font-size: .25rem;
margin-right: .25rem;
}
.top>p{
  font-size: .2rem;
}
.top>h1{
  position: absolute;
  right: .3rem;
}
div>div:nth-child(2){
    margin-top: .4rem ;
}
div{
    font-size: 0.2rem;
}
</style>